<template>
    <view class="xilu">
        <view class="page-foot bg-white" @click="formSubmit()">
            <view class="btn1">确定提交</view>
        </view>
        <view class="container plr30 pt30 fs30">
            <view class="flex-box flex-between pb50">
                <view>真实姓名</view>
                <input type="text" placeholder="请输入姓名" v-model="auth.username" placeholder-class="cola" class="fs30 tr">
            </view>
            <picker @change="chooseType" :value="identifyIndex" :range="identify" range-key="name">
                <view class="flex-box m-arrow-right mt20 mb50 fs30">
                    <view class="flex-grow-1">证件类型</view>
                    <view :class="identifyIndex===''?'cola':'col5'">
                        {{identifyIndex===''?'请选择':identify[identifyIndex].name}}
                    </view>
                </view>
            </picker>
            <view class="flex-box flex-between pt20 pb50">
                <view>证件号码</view>
                <input type="number" placeholder="请输入证件号码" v-model="auth.idcard_no" maxlength="20" placeholder-class="cola" class="fs30 tr flex-grow-1">
            </view>
            <view class="pb30">身份证图片<text class="fs24 col89">（请上传2M以内的JPG、PEJG、PNG格式的图片)</text></view>
            <view class="flex-box flex-between tc">
                <view>
                    <u-upload :fileList="fileListimages" @afterRead="afterRead" @delete="deletePic" name="images" multiple :maxCount="1" width="325" height="210">
                        <image src="../../static/icon/up_id1.png" mode="aspectfill"
                            style="width: 325rpx;height: 210rpx;"></image>
                    </u-upload>
                    <view class="fs24 col5 pt25">身份证国徽面</view>
                </view>
                <view>
                    <u-upload :fileList="fileListimages2" @afterRead="afterRead" @delete="deletePic" name="images2" multiple :maxCount="1" width="325" height="210">
                        <image src="../../static/icon/up_id2.png" mode="aspectfill" style="width: 325rpx;height: 210rpx;"></image>
                    </u-upload>
                    <view class="fs24 col5 pt25">身份证人像面</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	var validate = require("../../xilu/validate.js");
    export default {
        data() {
            return {
				fileListimages: [],
				fileListimages2: [],
                // identify: [{id:1,name:'身份证'}, {id:2,name:'护照'}],
                identify: [{id:1,name:'身份证'}],
                identifyIndex: "",
				auth:{
					username:'',
					idcard_type: '',
					idcard_no:'',
				}
            };
        },
		onLoad() {
			let page = this;
			this.getOpenerEventChannel().on('authTransfor',function(auth){
				if(Object.keys(auth).length>0){
					page.auth = {
						username: auth.username,
						idcard_type: auth.idcard_type,
						idcard_no:auth.idcard_no,
					};
					page.fileListimages = [{status: 'success',message: '',url: auth.idcard_back_image}];
					page.fileListimages2 = [{status: 'success',message: '',url: auth.idcard_face_image}];
					page.identifyIndex = auth.idcard_type>0? (auth.idcard_type-1) :'';
					page.$forceUpdate();
				}
			})
		},
        methods: {
            chooseType(e) {
                this.identifyIndex = e.detail.value;
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(filepath) {
				let page = this;
                return new Promise((resolve, reject) => {
                    page.$core.uploadFile({
                        filePath: filepath,
                        success: (ret, response) => {
                            resolve(ret.data.url)
                        }
                    })
                })
            },
			// 删除图片
			deletePic(event) {
			    this[`fileList${event.name}`].splice(event.index, 1)
			},
			
			//提交
			formSubmit() {
			    let formData = this.auth;
				
				let idcard_face_image = '',idcard_back_image='';
				this.fileListimages.forEach(item => idcard_back_image = item.url);
				this.fileListimages2.forEach(item => idcard_face_image = item.url);
				formData.idcard_face_image = idcard_face_image;
				formData.idcard_back_image = idcard_back_image;
				formData.idcard_type = this.identifyIndex!==''?this.identify[this.identifyIndex].id:'';
				
			    var rule = [
					{name: 'username',nameChn: '姓名',rules: ['require'],errorMsg: {require: '请填写姓名'}},
					{name: 'idcard_type',nameChn: '证件类型',rules: ['require'],errorMsg: {require: '请选择证件类型'}},
					{name: 'idcard_no',nameChn: '证件号',rules: ['require'],errorMsg: {require: '请填写证件号'},},
					{name: 'idcard_face_image',nameChn: '身份证人像',rules: ['require'],errorMsg: {require: '请上传身份证人像照'},},
					{name: 'idcard_back_image',nameChn: '身份证国徽',rules: ['require'],errorMsg: {require: '请上传身份证国徽照'},},
					];
			    // 是否全部通过，返回Boolean
				//console.log(validate.check(formData,rule),validate.getError(),formData);
			
				if(!validate.check(formData,rule)){
					uni.showToast({
						title: validate.getError()[0],
						icon:'none'
					});
					return ;
				}
				this.$core.post({url:'xilumarket.user/auth',data:formData,success:ret=>{
					uni.navigateBack({});
					uni.showToast({
						title: '提交成功',
						icon:'none'
					});
				}})
			}
        },
    }
</script>

<style lang="scss">

</style>
